<template>
	<view class="box">
		<!-- 导航 -->
		<uv-navbar title="收货地址" bgColor="#f7f6fa" height="44px" titleStyle="{font-weight: bold;font-size: 1.1rem;}"
			@click="goback"></uv-navbar>
		<view class="contact">
			<view class="one">
				<view class="left">收货人：</view>
				<input v-model="consignee" type="text" placeholder="请输入名字" />
			</view>
			<view class="one">
				<view class="left">手机号：</view>
				<input v-model="mobile" type="text" placeholder="请输入手机号" />
			</view>
			<view class="one">
				<view class="left">选择地区：</view>
				<input type="text" v-model="name" placeholder="请选择" />
				<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
				<uv-icon name="arrow-right" size="18px" @click="openPicker"></uv-icon>
			</view>
			<view class="one">
				<view class="left">详细地址:</view>
				<input v-model="address" type="text" placeholder="请输入详细地址" />
			</view>
			<view class="one">
				<view class="left">设为默认地址:</view>
				<view class="right">
					<uv-radio-group>
						<uv-radio customStyle="{text-align: right;}" name="2" activeColor="#008c8c"></uv-radio>
					</uv-radio-group>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<uv-button @click="AddressModification(e)" type="primary" color="#008c8c" shape="circle" text="修改地址"></uv-button>
			<uv-button @click="NewAddress" type="primary" color="#008c8c" shape="circle" text="新增地址"></uv-button>
		</view>
	</view>
</template>

<script>
	import {
		myRequest
	} from '@/request/request.js'
	export default {
		data() {
			return {
				// 收货人
				consignee: '',
				// 手机号
				mobile: '',
				// 地区
				name: '',
				// 地址
				address: '',
				columns: [
					['中国', '美国', '日本']
				],
				// 接收的id
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.e

			// console.log(this.id );
		},
		methods: {
			// 地址修改
			AddressModification(e) {
				
				const name = this.consignee
				const mobile = this.mobile
				const area = this.name
				const address = this.address
				const id = this.id
				console.log(id);
				myRequest('address/update?server=1', function(err, data) {
					if (err) {
						uni.showToast({
							title: err,
						});
					} else {
						console.log("成功", data);
						uni.navigateBack({
							delta: 1
						});
					}
				}, 'POST', {
					name: name,
					mobile: mobile,
					area: area,
					address: address,
					id: id

				})
			},
			// 新增收货地址
			NewAddress() {
				// 获取服务介绍
				// 双向绑定获取
				const name = this.consignee
				const mobile = this.mobile
				const area = this.name
				const address = this.address
				console.log(name, mobile, area, address);
				myRequest('address/add?server=1', function(err, data) {
					if (err) {
						uni.showToast({

							title: err,
						});
					} else {

						console.log("成功", data);
						uni.navigateBack({
							delta: 1
						})
					}
				}, 'POST', {
					name: name,
					mobile: mobile,
					area: area,
					address: address
				})
			},
			// 联动
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.name = e.value
				console.log('confirm', e);
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	@import url("newaddress.scss");
</style>